<!--退出登录  直接 @click="$router.push('/login')"  就可以跳转到登录页面-->
<template>
  <!--  <el-header> 使用的flex布局  盒内的div会在一行排列 -->
  <el-header style=" background-color: #FFFFFF;  font-size: 12px; line-height: 50px; display: flex; justify-content:space-between">

    <!--头部左侧的伸缩按钮和面包屑-->
    <div class="l-content">
      <!--伸缩按钮-->
      <div class="hide-menu" @click="collapseMenu">
        <i class="el-icon-s-fold" style="font-size: 20px;"/>
      </div>

      <!-- 面包屑 -->
      <Breadcumb/>
    </div>

    <!--  全屏显示-->
    <Screenfull/>

    <!--头部右侧的个人详情-->
    <div style="width: 200px;">
      <el-dropdown>
        <div style="display: flex">
          <el-avatar src="../assets/img/girl.jpg" alt="用户头像" style="margin-top:5px; margin-right:10px;cursor: pointer">
            <img :src="require('../assets/img/girl.jpg')" alt="失败头像"/>
          </el-avatar>
          <span class="el-dropdown-link;" style="margin-top:18px">
            <span style="color: #999093;cursor: pointer; font-family: 微软雅黑; font-weight:bolder">{{ user.username }}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="fa fa-user" @click="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item icon="fa fa-key" @click="updatePassword">修改密码</el-dropdown-item>
            <el-dropdown-item icon="fa fa-sign-out" @click="$router.push('/login')">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>

      </el-dropdown>
    </div>

  </el-header>
  <!--  <el-header>标签在这里结束-->

  <!--  用户信息-->
  <div>
    <el-dialog title="用户详情" v-model="dialogVisible" width="30%">
      <el-form  :model="user" label-width="120px">
        <el-form-item label="姓名:">
          <el-input v-model="user.username" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="昵称:">
          <el-input v-model="user.nickName" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="年龄:">
          <el-input v-model="user.age" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="性别:">
          <el-radio v-model="user.sex" label="男" disabled>男</el-radio>
          <el-radio v-model="user.sex" label="女" disabled>女</el-radio>
        </el-form-item>

        <el-form-item label="地址:">
          <el-input type="textarea" v-model="user.address" style="width:80%" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

  <div>
    <el-dialog title="修改密码" v-model="pwdDialogVisible" width="30%">
      <el-form :model="modifyPasswordModel" ref="form" label-width="100px"  :rules="rules"  size="small ">
        <el-form-item label="用户名">
          <el-input v-model="user.username" placeholder="用户名" disabled/>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPassWord">
          <el-input v-model="modifyPasswordModel.oldPassWord" placeholder="请输入旧密码" show-password/>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassWord">
          <el-input v-model="modifyPasswordModel.newPassWord" placeholder="请输入新密码" show-password/>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="modifyPasswordModel.confirmPassword" placeholder="请确认密码" show-password/>
        </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="pwdDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitModifyPassword">确 定</el-button>
        </span>
    </template>
  </el-dialog>
  </div>


</template>


<script>
import Breadcumb from "./Breadcumb";
import request from "../utils/request";
import Qs from "qs";
import {mapState} from "vuex";
import Screenfull from "./Screenfull";

export default {
  name: "Header",
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    })
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      dialogVisible: false,
      pwdDialogVisible:false,
      modifyPasswordModel:{
        newPassWord: '',
        oldPassWord: '',
        confirmPassword: ''
      },
      rules:{
        oldPassWord: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
        ],
        newPassWord: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
        ],
        confirmPassword: [
          {required: true, message: '请确认密码', trigger: 'blur'},
        ],
      }
    }
  },

  components: {Screenfull, Breadcumb},
  created() {
    console.log("头部信息中的用户......" + sessionStorage.getItem("user"))
  },

  methods: {
    //控制左侧菜单是否折叠
    collapseMenu() {
      this.$store.commit('collapseMenu')
    },
    userinfo() {
      //弹窗并显示内容
      this.dialogVisible = true;
      this.user = JSON.parse(sessionStorage.getItem("user"));  //将编辑的弹窗附上值
    },

    //修改密码
    updatePassword(){
      this.pwdDialogVisible = true;
      this.user = JSON.parse(sessionStorage.getItem("user"));  //将编辑的弹窗附上值
    },

    //确定修改密码
    submitModifyPassword(){
      if (this.modifyPasswordModel.newPassWord !== this.modifyPasswordModel.confirmPassword) {
        this.$message({
          type: "error",
          message: '2次密码输入不一致！'
        })
        return
      }

      this.$refs['form'].validate((valid) => {
        if (valid) {
          debugger
          let params={
              password:this.modifyPasswordModel.newPassWord,
          }
          request.post("/user/updatePassWord", params).then(res => {
            console.log(res)
            if (res.code === '0') {
              this.$message({
                type: "success",
                message: "修改成功"
              })
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      })
      this.pwdDialogVisible = false;    //最后关闭弹窗
      //密码修改成功后跳到登录页重新登录
      this.$router.push("/login")
    }
  }


}
</script>

<style scoped>

.hide-menu {
  color: #1a1919;
  float: left;
  cursor: pointer;
  line-height: 10px;
}

.el-header {
  --el-header-padding: 0 10px;
  --el-header-height: 50px;
  border-bottom: none;
  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
}

.l-content {
  display: flex;
  align-items: center;
  margin-right: auto;
}

.el-button {
  margin-right: 20px;
}


.user {
  cursor: pointer;
}

.avatar {
  color: white;
  margin: 5px 5px 10px 10px;
  width: 120px;
}
</style>

